當網頁內頁中每一頁都有一個相同的側選單，當發現有一個項目的字寫錯了，工程師就會很厭世的去每一頁做修改，如果這時候有元件，1小時的修改時間可能30秒就可以完成。

於是React component就可以派上用場了!!

React component有兩種樣子:

1. Class component(比較少用)

   class Welcome extends React.Component {
     render() {
       return <h1>Hello</h1>;
     }
   }
   

2. Function component

   function Welcome() {
     return <h1>Hello</h1>;
   }
   

兩種 component 在 React 中是一樣的。

其實兩種寫法都應該要知道怎麼使用，由於過去只有class component的寫法，故有些大型專案裡面會看到同時有這兩種寫法存在，若要修改內容就必須會使用他們，

父子層

元件也可以在裡面包元件(不只一個，可以是多個元件)，這時候就會產生父子層關係。

這裡是個簡單的父子層元件範例??

function Children() { // 子元件
  return <>Children component</> 
}

function App() { // 父元件
  return <>
    <Children />
  </>
}

App()中包一個Children()，也就是父子層的概念，Children()被定義後，在App父元件引入<Children />，此時渲染app後就可以看到children中的文字囉!